<template>
  <div class="profile-page">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="profile-card">
          <div class="profile-header">
            <el-avatar :size="100" :src="userInfo?.avatar" />
            <div class="profile-info">
              <h1>{{ userInfo?.name }}</h1>
              <p class="headline">{{ userInfo?.headline || '编辑个人简介...' }}</p>
              <div class="profile-stats">
                <div class="stat-item">
                  <div class="stat-value">{{ userInfo?.followersCount || 0 }}</div>
                  <div class="stat-label">关注者</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ userInfo?.followingCount || 0 }}</div>
                  <div class="stat-label">关注</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ userInfo?.answerCount || 0 }}</div>
                  <div class="stat-label">回答</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ userInfo?.questionCount || 0 }}</div>
                  <div class="stat-label">提问</div>
                </div>
              </div>
            </div>
            <div class="profile-actions">
              <el-button type="primary" @click="showEditProfile">
                编辑资料
              </el-button>
            </div>
          </div>
        </el-card>

        <el-tabs v-model="activeTab" class="profile-tabs">
          <el-tab-pane label="回答" name="answers">
            <div v-if="userAnswers.length" class="answer-list">
              <el-card v-for="answer in userAnswers" :key="answer.id" class="answer-item">
                <div class="question-title">
                  <router-link :to="'/question/' + answer.questionId">
                    {{ answer.questionTitle }}
                  </router-link>
                </div>
                <div class="answer-content">
                  {{ answer.content }}
                </div>
                <div class="answer-footer">
                  <span class="vote-count">
                    <el-icon><ThumbsUp /></el-icon>
                    {{ answer.votes }} 赞同
                  </span>
                  <span class="comment-count">
                    <el-icon><ChatLineRound /></el-icon>
                    {{ answer.comments }} 评论
                  </span>
                  <span class="date">{{ formatDate(answer.createdAt) }}</span>
                </div>
              </el-card>
            </div>
            <el-empty v-else description="暂无回答" />
          </el-tab-pane>

          <el-tab-pane label="提问" name="questions">
            <div v-if="userQuestions.length" class="question-list">
              <el-card v-for="question in userQuestions" :key="question.id" class="question-item">
                <router-link :to="'/question/' + question.id" class="question-title">
                  {{ question.title }}
                </router-link>
                <div class="question-meta">
                  <span>{{ question.answerCount }} 个回答</span>
                  <span>{{ question.followCount }} 人关注</span>
                  <span>{{ formatDate(question.createdAt) }}</span>
                </div>
              </el-card>
            </div>
            <el-empty v-else description="暂无提问" />
          </el-tab-pane>

          <el-tab-pane label="收藏" name="collections">
            <div v-if="userCollections.length" class="collection-list">
              <el-card v-for="collection in userCollections" :key="collection.id" class="collection-item">
                <div class="collection-header">
                  <h3>{{ collection.title }}</h3>
                  <span class="item-count">{{ collection.itemCount }} 条内容</span>
                </div>
                <div class="collection-preview">
                  <div v-for="item in collection.items.slice(0, 3)" :key="item.id" class="preview-item">
                    <router-link :to="item.link">{{ item.title }}</router-link>
                  </div>
                </div>
              </el-card>
            </div>
            <el-empty v-else description="暂无收藏" />
          </el-tab-pane>
        </el-tabs>
      </el-col>

      <el-col :span="8">
        <el-card class="about-card">
          <template #header>
            <div class="card-header">
              <span>个人介绍</span>
              <el-button type="text" @click="showEditProfile">
                编辑
              </el-button>
            </div>
          </template>
          <div class="about-content">
            <p v-if="userInfo?.about">{{ userInfo.about }}</p>
            <el-empty v-else description="编辑个人介绍..." />
          </div>
        </el-card>

        <el-card class="achievement-card">
          <template #header>
            <div class="card-header">
              <span>个人成就</span>
            </div>
          </template>
          <div class="achievement-list">
            <div v-for="achievement in achievements" :key="achievement.id" class="achievement-item">
              <el-icon :class="achievement.icon"></el-icon>
              <div class="achievement-info">
                <div class="achievement-name">{{ achievement.name }}</div>
                <div class="achievement-desc">{{ achievement.description }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑资料对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑个人资料"
      width="50%"
    >
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="昵称">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="一句话">
          <el-input v-model="editForm.headline" />
        </el-form-item>
        <el-form-item label="个人介绍">
          <el-input
            v-model="editForm.about"
            type="textarea"
            :rows="4"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveProfile">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { ThumbsUp, ChatLineRound } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

const userStore = useUserStore()
const activeTab = ref('answers')
const editDialogVisible = ref(false)

const userInfo = ref(null)
const userAnswers = ref([])
const userQuestions = ref([])
const userCollections = ref([])
const achievements = ref([
  {
    id: 1,
    name: '优秀回答者',
    description: '获得100个赞同',
    icon: 'Medal'
  },
  {
    id: 2,
    name: '活跃用户',
    description: '连续签到30天',
    icon: 'Calendar'
  }
])

const editForm = ref({
  name: '',
  headline: '',
  about: ''
})

const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD')
}

const showEditProfile = () => {
  editForm.value = {
    name: userInfo.value?.name || '',
    headline: userInfo.value?.headline || '',
    about: userInfo.value?.about || ''
  }
  editDialogVisible.value = true
}

const handleSaveProfile = async () => {
  try {
    // 调用API保存个人资料
    await userStore.updateProfile(editForm.value)
    ElMessage.success('保存成功')
    editDialogVisible.value = false
    await fetchUserData()
  } catch (error) {
    console.error('Failed to save profile:', error)
    ElMessage.error('保存失败')
  }
}

const fetchUserData = async () => {
  try {
    await userStore.fetchUserProfile()
    userInfo.value = userStore.getUserInfo
    
    // 获取用户的回答、问题和收藏
    // 这里应该调用相应的API
    userAnswers.value = []
    userQuestions.value = []
    userCollections.value = []
  } catch (error) {
    console.error('Failed to fetch user data:', error)
    ElMessage.error('获取用户数据失败')
  }
}

onMounted(() => {
  fetchUserData()
})
</script>

<style scoped lang="scss">
.profile-page {
  padding: 20px;

  .profile-card {
    margin-bottom: 20px;

    .profile-header {
      display: flex;
      align-items: flex-start;
      gap: 20px;

      .profile-info {
        flex: 1;

        h1 {
          margin: 0 0 10px;
          font-size: 24px;
        }

        .headline {
          color: #8590a6;
          margin-bottom: 15px;
        }

        .profile-stats {
          display: flex;
          gap: 40px;

          .stat-item {
            text-align: center;

            .stat-value {
              font-size: 18px;
              font-weight: 600;
              color: #121212;
            }

            .stat-label {
              font-size: 14px;
              color: #8590a6;
            }
          }
        }
      }
    }
  }

  .profile-tabs {
    margin-top: 20px;

    .answer-item,
    .question-item,
    .collection-item {
      margin-bottom: 15px;

      .question-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;

        a {
          color: #121212;
          text-decoration: none;

          &:hover {
            color: #175199;
          }
        }
      }

      .answer-content {
        color: #121212;
        margin: 10px 0;
        line-height: 1.6;
      }

      .answer-footer,
      .question-meta {
        color: #8590a6;
        font-size: 14px;

        span {
          margin-right: 15px;
        }

        .el-icon {
          margin-right: 4px;
        }
      }
    }
  }

  .about-card,
  .achievement-card {
    margin-bottom: 20px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .about-content {
      line-height: 1.6;
    }

    .achievement-list {
      .achievement-item {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }

        .el-icon {
          font-size: 24px;
          margin-right: 10px;
          color: #f5a623;
        }

        .achievement-info {
          .achievement-name {
            font-weight: 600;
            margin-bottom: 4px;
          }

          .achievement-desc {
            font-size: 14px;
            color: #8590a6;
          }
        }
      }
    }
  }
}
</style> 